<template>
  <div>

    <router-view ></router-view>


    <v-bottom-navigation
        color="primary"
        fixed
        :value="pageIndex"
    >
      <v-btn min-width="75"   @click="toPage('/home/index',0)">
        <span>首页</span>

        <v-icon>mdi-home-outline</v-icon>
      </v-btn>

      <v-btn min-width="75"   @click="toPage('/home/discover',1)">
        <span>发现</span>

        <v-icon>mdi-earth</v-icon>
      </v-btn>

      <v-btn min-width="75"  >
        <v-icon color="primary" size="45"  @click.stop="showOverlay()">mdi-plus-circle</v-icon>
      </v-btn>

      <v-btn min-width="75"   @click="toPage('/home/skin',2)">
        <span>肤质</span>

        <v-icon>mdi-face-woman-shimmer-outline</v-icon>
      </v-btn>
      <v-btn  min-width="75"  @click="toPage('/home/mine',3)">
        <span>我的</span>

        <v-icon>mdi-account-outline</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <v-overlay :value="overlay">
      <v-container class="mt-15 pa-15" @click="overlay=false">
        <v-row style="height: 200px"></v-row>
        <v-row class="mt-15" justify="center">
          <v-col cols="auto">
            <v-card rounded color="white" outlined light to="/NewReview">
              <v-card-text >
                <v-icon size="60" color="primary">mdi-square-edit-outline</v-icon>
              </v-card-text>
              <v-card-text class="text-center grey lighten-3 pa-0 pt-1">
                <span class="text-subtitle-1">产品点评</span>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="auto">
            <v-card rounded color="white" outlined light to="/newArticle">
              <v-card-text >
                <v-icon size="60" color="primary">mdi-file-document-outline</v-icon>
              </v-card-text>
              <v-card-text class="text-center grey lighten-3 pa-0 pt-1">
                <span class="text-subtitle-1">心得笔记</span>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col cols="auto">
            <v-icon color="secondary" size="45">
              mdi-close-circle-outline
            </v-icon>
          </v-col>
        </v-row>
      </v-container>

    </v-overlay>
    </div>
</template>

<script>
export default {
  name: 'Home',
  data: () => ({
    pageIndex: 0,
    value: 0,
    overlay:false,
  }),
  methods:{
    toPage(r,index){
      if (this.$route.path!==r){
        this.$router.replace(r)
      }
      this.value = index
    },
    showOverlay(){
      this.overlay = true
      // setTimeout(()=>{
      //   this.overlay = false
      // },2000)
    }
  },
  mounted() {
    if (this.$route.path==='/home/discover'){
      this.pageIndex =1
    }
    if (this.$route.path==='/home/skin'){
      this.pageIndex =3
    }
    if (this.$route.path==='/home/mine'){
      this.pageIndex =4
    }
  }

}
</script>
<style scoped>
.small-bottom-item{
  min-width: 75px !important;
}
</style>
